<template>
  <div>
    <el-select v-model="selectValue.groupValue" placeholder="请选择分组" @change="chooseBarGroup (selectValue.groupValue)">
      <el-option
        v-for="item in barGroup"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="selectValue.addressValue" placeholder="请选择地址"
               @change="chooseBarAddress (selectValue.addressValue)">
      <el-option
        v-for="item1 in barAddress"
        :key="item1.value"
        :label="item1.label"
        :value="item1.value">
      </el-option>
    </el-select>
    <el-select v-model="selectValue.modelValue" placeholder="请选择型号"
               @change="chooseBarModel (selectValue.modelValue)" v-show="modelSelect">
      <el-option
        v-for="item1 in barModel"
        :key="item1.id"
        :label="item1.code"
        :value="item1.id">
      </el-option>
    </el-select>
    <el-select v-model="selectValue.factoryValue" placeholder="请选择工厂"
               @change="chooseBarFactory (selectValue.factoryValue)">
      <el-option
        v-for="item1 in barFactory"
        :key="item1.id"
        :label="item1.name"
        :value="item1.id">
      </el-option>
    </el-select>
    <el-date-picker
      v-model="selectValue.yearValue"
      align="right"
      type="year"
      placeholder="请选择年份"
      @change="chooseBarYear (selectValue.yearValue)">
    </el-date-picker>
    <div class="x-bar">
      <div :id="id" :option="option"></div>
    </div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts'
  import bar from './chart-options/factoryBarChart.js'
  import {
    apiGetFactoryRepairCount,
    apiGetProvinceList,
    apiGetModelList,
    apiGetFactoryList
  } from '@/api/chart/chart'

  export default {
    name: 'PointBarChart',
    created () {},
    // 验证类型
    data () {
      return {
        id: 'bar',
        year: '',
        barGroup: [{
          value: 'model',
          label: '型号'
        }, {
          value: 'address',
          label: '地址'
        }],
        barAddress: [],
        barModel: [],
        barFactory: [],
        modelSelect: false,
        selectValue: {
          groupValue: '型号',
          addressValue: '全国',
          yearValue: '',
          modelValue: '全部型号',
          factoryValue: '全部工厂'
        },
        option: bar.bar,
        theme: bar.theme,
        listQuery: {
          year: '',
          group: 'model',
          province: '',
          modelId: '',
          factoryId: ''
        },
        chartInfo: {
          title: '',
          subtitle: ''
        }
      }
    },
    methods: {
      // 工厂选择初始化
      selectedFactoryInit () {
        apiGetFactoryList().then(response => {
          let factoryList = response.data
          let factory = []
          let temp = {}
          for (let i in factoryList) {
            if (!temp[factoryList[i].name]) {
              temp[factoryList[i].name] = factoryList[i].id
            }
          }
          factory.push({'name': '全部工厂', 'id': ''})
          for (let k in temp) {
            factory.push({'name': k, 'id': temp[k]})
          }
          this.barFactory = factory
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 型号选择初始化
      selectedModelInit () {
        apiGetModelList().then(response => {
          let modelList = response.data
          let model = []
          let temp = {}
          for (let i in modelList) {
            if (!temp[modelList[i].code]) {
              temp[modelList[i].code] = modelList[i].id
            }
          }
          model.push({'code': '全部型号', 'value': ''})
          for (let k in temp) {
            model.push({'code': k, 'id': temp[k]})
          }
          this.barModel = model
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 省份选择初始化
      selectedDataInit () {
        apiGetProvinceList().then(response => {
          let province = response.data
          let address = []
          let temp = {}
          for (let i in province) {
            if (!temp[province[i].name]) {
              temp[province[i].name] = province[i].code
            }
          }
          address.push({'label': '全国', 'value': '86'})
          for (let k in temp) {
            address.push({'label': k, 'value': temp[k]})
          }
          this.barAddress = address
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 当前时间初始化
      timeInit () {
        let time = new Date()
        this.year = time.toString().substring(11, 15)
        this.listQuery.year = this.year
        this.selectValue.yearValue = this.year
      },
      // 接口请求参数重置
      resetParamInfo (group) {
        this.selectValue.yearValue = this.year
        this.selectValue.addressValue = '全国'
        this.selectValue.modelValue = '全部型号'
        this.selectValue.factoryValue = '全部工厂'
        this.listQuery.group = group
        this.listQuery.province = '86'
        this.listQuery.year = this.year
        this.listQuery.modelId = ''
        this.listQuery.factoryId = ''
      },
      chooseBarYear (value) {
        let year = ''
        if (value === null) {
          year = '2017'
        } else {
          year = value.toString().substring(11, 15)
        }
        if (value !== this.listQuery.year) {
          this.listQuery.year = year
          this.createNewChart()
        }
      },
      chooseBarGroup (value) {
        if (value === 'model') {
          if (this.listQuery.group !== 'model') {
            this.resetParamInfo(value)
            this.createNewChart()
          }
          this.modelSelect = false
        } else if (value === 'address') {
          if (this.listQuery.group !== 'address') {
            this.resetParamInfo(value)
            this.createNewChart()
          }
          this.modelSelect = true
        }
      },
      chooseBarAddress (value) {
        if (value !== this.listQuery.province && value !== '全国') {
          this.listQuery.province = value
          this.createNewChart()
        }
      },
      // 型号选择
      chooseBarModel (value) {
        if (value !== this.listQuery.modelId && value !== '全部型号') {
          this.listQuery.modelId = value
          this.createNewChart()
        }
      },
      // 工厂选择
      chooseBarFactory (value) {
        if (value !== this.listQuery.factoryId && value !== '全部工厂') {
          this.listQuery.factoryId = value
          this.createNewChart()
        }
      },
      createNewChart () {
        apiGetFactoryRepairCount(this.listQuery).then(response => {
          let lineresult = response.data
          let series = []
          let temp = {}
          for (var i in lineresult) {
            if (!temp[lineresult[i].name]) {
              temp[lineresult[i].name] = lineresult[i].data
            } else {
              temp[lineresult[i].name].push(lineresult[i].data)
            }
          }
          for (var k in temp) {
            series.push({'name': k, 'data': temp[k]})
          }
          let title = this.listQuery.year + '年送修统计图'
          let subtitle = '分组类型：'
          if (this.listQuery.group === 'model') {
            subtitle = subtitle + '型号'
          } else if (this.listQuery.group === 'address') {
            subtitle = subtitle + '地址'
          }
          this.option.title.text = title
          this.option.subtitle.text = subtitle
          this.option.series = series
          HighCharts.chart(this.id, this.option)
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      }
    },
    mounted () {
      this.selectedFactoryInit()
      this.selectedModelInit()
      this.selectedDataInit()
      this.timeInit()
      this.createNewChart()
    }
  }
</script>
